<template>
  <el-form-item v-if="editorForm.background" label="背景">
    <el-radio-group v-model="editorForm.background.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>
    <div v-if="!editorForm.background.isDefault" class="custom-next">
      <el-form label-position="right" label-width="auto">
        <el-form-item label="类型：">
          <el-select v-model="editorForm.background.type" placeholder="请选择" @change="handleTypeChange">
            <el-option label="纯色" value="color" />
            <el-option label="背景图" value="image" />
          </el-select>
        </el-form-item>
        <el-form-item label="背景图片" v-if="editorForm.background.type === 'image'">
          <div class="form-img" @click="handleUploadImg">
            <div class="has-img" v-if="editorForm.background.image">
              <img :src="editorForm.background.image" alt="" />
              <span @click.stop="handleRemoveImg">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </div>
            <el-icon v-else>
              <Plus />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item label="背景色：" v-if="editorForm.background.type === 'color'">
          <el-color-picker show-alpha v-model="editorForm.background.color" @change="handleColorChange" />
        </el-form-item>
      </el-form>
    </div>
    <FilesUpload v-model:showDialog="showImageUpload" :limit="1" @getFileList="handleGetCoverImg" />
  </el-form-item>
</template>



<script setup>
import { ref, inject, onMounted } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const { editorForm, domList, changeDefault, backUpdate } = inject('commonForm')
const handleDefault = (val) => {
  if (val) {
    changeDefault('background')
  }
  handleTypeChange(editorForm.value.background.type)
}
const handleTypeChange = (val) => {
  if (val === 'color') {
    bindDom.value.forEach(element => {
      element.style.backgroundColor = editorForm.value.background.color
      element.style.backgroundImage = ''
    })
  } else {
    bindDom.value.forEach(element => {
      element.style.backgroundColor = ''
      element.style.backgroundImage = `url(${editorForm.value.background.image})`
    })
  }
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}
// 初始化属性和元素对应关系
const bindDom = ref(new Set())
const initDomMapping = () => {
  const bindKeys = [`${editorForm.value._key}.background.image`, `${editorForm.value._key}.background.color`]
  domList.value.forEach(element => {
    const bindValue = element.getAttribute('_bind')
    bindKeys.forEach(key => {
      if (bindValue.includes(key)) {
        bindDom.value.add(element)
      }
    })
  })
}

const handleColorChange = () => {
  handleTypeChange('color')
}

// 图片设置
const showImageUpload = ref(false)
const handleUploadImg = () => {
  showImageUpload.value = true
}

const handleGetCoverImg = imgList => {
  if (imgList.length === 0) return
  editorForm.value.background.image = imgList[0].url
  handleTypeChange('image')
}

// 移除图片
const handleRemoveImg = () => {
  editorForm.value.background.image = ''
  handleTypeChange('image')
}

onMounted(() => {
  initDomMapping()
})
</script>

<style scoped lang="scss">

</style>
